<template>
    <div>
        <vxe-toolbar>
            <template v-slot:buttons>
<!--                <vxe-button @click="getTreeExpansionEvent">获取已展开</vxe-button>-->
                <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>
                <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>
            </template>
        </vxe-toolbar>

        <vxe-table
                resizable
                :tree-config="{children: 'children', accordion: true}"
                border="inner"
                ref="xTree"
                highlight-hover-row
                height="550"
                size="medium"
                show-overflow="tooltip"
                :loading="tableLoading"
                align="center"
                header-align="center"
                :data="tableData"
                @toggle-tree-expand="toggleExpandChangeEvent">
            <vxe-table-column field="name" title="名称" tree-node></vxe-table-column>
            <vxe-table-column field="countNum" title="数量"></vxe-table-column>
        </vxe-table>
    </div>
</template>

<script>
import { officePlaceNum } from '@/api/pass'

export default {
  data () {
    return {
      tableData: [],
      tableLoading: false
    }
  },
  methods: {
    init () {
      this.tableLoading = true
      officePlaceNum().then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = this.composeTree(ret.data.data)
          this.tableLoading = false
        } else {
          this.$Message.error(ret.data.errmsg)
          this.tableLoading = false
          return false
        }
      })
    },
    toggleExpandChangeEvent ({ row, expanded }) {
      // console.log('节点展开事件' + expanded)
    },
    getTreeExpansionEvent () {
      let treeExpandRecords = this.$refs.xTree.getTreeExpandRecords()
      this.$XModal.alert(treeExpandRecords.length)
    },
    composeTree (list) {
      const data = JSON.parse(JSON.stringify(list)) // 浅拷贝不改变源数据
      const result = []
      if (!Array.isArray(data)) {
        return result
      }
      data.forEach(item => {
        delete item.children
      })
      const map = {}
      data.forEach(item => {
        map[item.id] = item
      })
      data.forEach(item => {
        const parent = map[item.parent_id]
        if (parent) {
          (parent.children || (parent.children = [])).push(item)
        } else {
          result.push(item)
        }
      })
      return result
    }

  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .ivu-col.ivu-col-span-6{
        padding-right: 10px;
        color: #ffffff;
        width: 20%;
    }
    .ivu-col.ivu-col-span-20{
        border-bottom: 1px solid #333333;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    .ivu-col.ivu-col-span-20:last-child{
        border-bottom: 0;
    }
    .ivu-col.ivu-col-span-6:last-child{
        padding-right: 0;
    }
    .ivu-table-wrapper-with-border{
        margin-top: 10px;
    }
    .day-num-item{
        margin-top: 10px;
    }
    .ivu-select{
        margin-top: 10px;
    }
</style>
